var table = Vue.component("table_", {
    data: function () {
        return {
            findForm: { name:''},
            tableData: [],
            loading: false,

            pageSize:5,
            currentPage:0,
            pageTotal:0,
            sort:'id',
            order:'asc',
        }
    },
    methods: {
        getData(v) {
            if (v=='find')  //点【查询】时，要从第一页开始
                this.pageNum=1

            this.loading=true
            axios.post('/GetListData', {
                nr:this.findForm.name,
                page:this.currentPage,
                size:this.pageSize,
                sort:this.sort,
                order:this.order,
            }).then((res) => {
                if (res.data.code==200) {
                    this.loading=false
                    this.pageTotal=res.data.total
                    this.tableData=res.data.data
                }
            });
        },
        handlePageChange(val,size){
            this.currentPage=val
            this.pageSize=size
            this.getData()
        },
        sort_change(column, prop, order){
            this.sort=column.prop
            this.order=column.order=="descending"?"DESC":"ASC"
            this.getData()
        },
    },
    mounted(){
        this.getData()
    },
    components:{
        CustomizePagination : () => import('../components/pagination.js')
    },
    template: `<div>
        <el-table :data="tableData" style="width: 100%" height="500" >
            <el-table-column prop="name" label="角色名称"></el-table-column>
            <el-table-column label="权限">
                <template #default="{ row }">
                    <span v-for="permission in row.permissions" :key="permission.id">{{ permission.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="text" @click="showEditRoleDialog(row)">编辑</el-button>
                    <el-button type="text" @click="deleteRole(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <CustomizePagination :page="currentPage" :total=pageTotal :size="pageSize"
              @page-change="handlePageChange" />
    </div>`,
});


export default table